<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<div class="mod-lswms__sku">
						<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
							<el-form-item>
								<el-input v-model="dataForm.sku" size="small" placeholder="物料编码" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.descr" size="small" placeholder="物料名称" clearable></el-input>
							</el-form-item>

							<el-form-item v-show="false">
								<el-input v-model="dataForm.sort" size="small" placeholder="类别" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-cascader v-model="sortvalue" :options="skucategoryList" size="small" placeholder="类别"
									:props="{ value: 'categorykey' ,label:'name' }" :show-all-levels="false"
									@change="handleChange" clearable>
								</el-cascader>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.factorycdoe" size="small" placeholder="计量编码/工装号" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.product" size="small" placeholder="产品代号" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-button size="small" @click="getDataList()">查询</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="addOrUpdateHandle()" size="small"
										   v-if="hasPermission('lswms:sku:save')" >新增</el-button>
							</el-form-item>
							<el-form-item>
								<el-upload :action="importFileUrl" :data="upLoadData" name="importfile"
									:onError="uploadError" :onSuccess="uploadSuccess" :beforeUpload="beforeAvatarUpload"
									ref="upload" :http-request="uploadOk"  v-if="hasPermission('lswms:sku:import')"  >
									<el-button style="margin-left: 10px;" size="small" type="success">上传</el-button>
								</el-upload>
								<!-- <el-button type="warning" @click="importHandle()">导入</el-button> -->
							</el-form-item>
							<el-form-item>
								<el-button type="info" @click="exportHandle()" size="small"
										   v-if="hasPermission('lswms:sku:export')" >导出</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="info" @click="exportModuleHandle()" size="small"
										   v-if="hasPermission('lswms:sku:exportModule')" >导出模板</el-button>
							</el-form-item>
						</el-form>
						<el-table v-loading="dataListLoading" :data="dataList" border
							@selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
							style="width: 100%;">
							<el-table-column type="selection" header-align="center" align="center" width="50">
							</el-table-column>
							<el-table-column prop="sku" label="物料编码" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="descr" label="物料名称" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="categoryname" label="分类" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="specs" label="规格" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="unit" label="单位" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="price" label="价格" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="isconsumablestr" label="是否消耗品" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="factory" label="生产厂家" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="factorycdoe" label="计量编码/工装号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="product" label="产品代号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="name" label="名称" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="safetyqty" label="安全库存" header-align="center" align="center">
							</el-table-column>

							<el-table-column prop="isuniquecodestr" label="唯一码管理" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="accuracyclass" label="精度等级" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="effectlife" label="有效期天数" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="warningdays" label="提前预警天数" header-align="center" align="center">
							</el-table-column>


							<el-table-column type="expand" fixed="right" label="详情">
								<template #default="props">

									<!-- <el-table-column prop="pack" label="包装"  header-align="center"
													align="center"></el-table-column>
													         
													 
													         <el-table-column prop="weight" label="重量"  header-align="center"
													align="center"></el-table-column>
													         <el-table-column prop="length" label="长度"  header-align="center"
													align="center"></el-table-column>
													         <el-table-column prop="width" label="宽度"  header-align="center"
													align="center"></el-table-column>
													         <el-table-column prop="height" label="高度"  header-align="center"
													align="center"></el-table-column>
													         <el-table-column prop="lotrule" label="批次规则"  header-align="center"
													align="center"></el-table-column>
													        
													         <el-table-column prop="status" label="物料状态"  header-align="center"
													align="center"></el-table-column> -->
									<!-- <el-table-column prop="strategykey" label="上架策略"  header-align="center"
													align="center">
													<template #default="scope">
																<el-select v-model="scope.row.strategykey" disabled>
																											<el-option  value="" label="--"> </el-option>
																	<el-option v-for="item in getPutawaystrategyList" :key="item.strategykey" :label="item.strategyname"
																		:value="item.strategykey">
																	</el-option>
																</el-select>
													</template>
													
													</el-table-column> -->
									<!-- <el-table-column prop="zonecode" label="上架区"  header-align="center"
													align="center">
																									   <template #default="scope">
																											   <el-select v-model="scope.row.zonecode" disabled>
																												   <el-option  value="" label="--"> </el-option>
																													   <el-option v-for="item in zoneList" :key="item.zonecode" :label="item.zonename"
																															   :value="item.zonecode">
																													   </el-option>
																											   </el-select>
																									   </template>
													</el-table-column> -->
									<!-- <el-table-column prop="allocationstrategy" label="分配策略"  header-align="center"
													align="center"></el-table-column> -->
									<!-- <el-table-column prop="rolateby" label="周转" header-align="center" align="center"> -->


									<el-form label-position="left" inline class="demo-table-expand">
										<el-row>
											<el-col :span="4">
												<el-form-item label="上架策略:">
													<!-- <span>{{ props.row.strategykey }}</span> -->
													<span>{{ props.row.strategyname }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="上架区:">
													<!-- <span>{{ props.row.zonecode }}</span> -->
													<span>{{ props.row.zonename }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="分配策略:">
													<!-- <span>{{ props.row.allocationstrategy }}</span> -->
													<span>{{ props.row.allocationstrategyname }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="周转">
													<!-- <span>{{ props.row.rolateby }}</span> -->
													<span>{{ props.row.rolatebystr }}</span>

												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="包装:">
													<span>{{ props.row.pack }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="批次规则:">
													<span>{{ props.row.lotrule }}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="长度:">
													<span>{{ props.row.length }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="宽度:">
													<span>{{ props.row.width}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="高度:">
													<span>{{ props.row.height}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="重量:">
													<span>{{ props.row.weight}}</span>
												</el-form-item>
											</el-col>

										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="备用字段1:">
													<span>{{ props.row.reserve1 }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="备用字段2:">
													<span>{{ props.row.reserve2}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="备用字段3:">
													<span>{{ props.row.reserve3}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="备用字段4:">
													<span>{{ props.row.reserve4}}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="备用字段5:">
													<span>{{ props.row.reserve5}}</span>
												</el-form-item>
											</el-col>

										</el-row>
									</el-form>
								</template>
							</el-table-column>
							<!-- <template #default="scope">
								<el-select v-model="scope.row.rolateby" disabled>
									<el-option value="" label="--"> </el-option>
									<el-option v-for="item in rolatebys" :key="item.list" :label="item.listname"
										:value="item.list">
									</el-option>
								</el-select>
							</template> -->
							<!-- </el-table-column>
							<el-table-column prop="reserve1" label="备用字段1" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="reserve2" label="备用字段2" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="reserve3" label="备用字段3" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="reserve4" label="备用字段4" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="reserve5" label="备用字段5" header-align="center" align="center">
							</el-table-column> -->
							<el-table-column label='操作' fixed="right" header-align="center" align="center" width="150">
								<template #default="scope">
									<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)"  v-if="hasPermission('lswms:sku:update')">修改 
									</el-button>
									<el-button type="text" size="small" @click="deleteHandle(scope.row.sku)"  v-if="hasPermission('lswms:sku:delete')">删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
							:total="total" layout="total, sizes, prev, pager, next, jumper"
							@size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
						</el-pagination>
						<!-- 弹窗, 新增 / 修改 -->
						<skuAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="refreshFn">
						</skuAddOrUpdate>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		importExcel
	} from "../../../network/lswms/base/Sku";
	import DataList from "@/utils/DataList";
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';
	import skuAddOrUpdate from "@/components/lswms/base/SkuAddOrUpdate";
	import {
		getzonelist
	} from "@/network/lswms/base/Zone.js"
	import {
		getPutawaystrategyPage
	} from "@/network/lswms/base/Putawaystrategy.js"
	import {
		request
	} from "@/network/request.js"
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"
	import {
		ElMessage
	} from "element-plus";
	import {
		getSkucategoryById,
		getSkucategoryByType
	} from "@/network/lswms/base/Skucategory"

	import {hasPermission} from "@/utils/hasPermission"
	export default {
		name: "sku",

		components: {
			skuAddOrUpdate,
		},
		data() {
			return {
				upLoadData: {
					cpyId: '123456',
					occurTime: '2017-08'
				},
				importFileUrl: 'http://localhost:8088/wms/lswms/sku/import'
			}


		},
		/*methods: {
		    uploadOk(fileParam){
		        const fileObj =fileParam.file;
		        const form = new FormData();
		        form.append("textFile", fileObj);
		        importExcel(form).then((res)=>{
		            if (res.code !== 0) {

		                return ElMessage.error(res.msg);
		            }
		            ElMessage({
		                message: '操作成功',
		                type: 'success',
		                duration: 500,
		                onClose: function() {
		                    getDataList();
		                }
		            })
		        })
		    },*/
		methods: {
			// 上传成功后的回调
			uploadSuccess(response, file, fileList) {
				console.log('上传文件', response)
			},
			// 上传错误
			uploadError(response, file, fileList) {
				console.log('上传失败，请重试！')
			},
			// 上传前对文件的大小的判断
			beforeAvatarUpload(file) {
				const extension = file.name.split('.')[1] === 'xls'
				const extension2 = file.name.split('.')[1] === 'xlsx'
				const extension3 = file.name.split('.')[1] === 'doc'
				const extension4 = file.name.split('.')[1] === 'docx'
				const isLt2M = file.size / 1024 / 1024 < 10
				if (!extension && !extension2 && !extension3 && !extension4) {
					console.log('上传模板只能是 xls、xlsx、doc、docx 格式!')
				}
				if (!isLt2M) {
					console.log('上传模板大小不能超过 10MB!')
				}
				return extension || extension2 || extension3 || extension4 && isLt2M
			}
		},

		setup() {
			const {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();

			const uploadOk = (fileParam) => {
				const fileObj = fileParam.file;
				const form = new FormData();
				form.append("textFile", fileObj);
				importExcel(form).then((res) => {
					if (res.code !== 0) {

						return ElMessage.error(res.msg);
					}
					ElMessage({
						message: '操作成功',
						type: 'success',
						duration: 500,
						onClose: function() {
							getDataList();
						}
					})
				})
			}
			const uploadActionUrl = ref('/lswms/sku/import')

			onMounted(() => {
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/sku/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/sku';
				mixinViewModuleOptions.value.exportURL = '/lswms/sku/export';
				mixinViewModuleOptions.value.deleteIsBatchKey = 'sku';
				mixinViewModuleOptions.value.deleteIsBatch = true
				if (mixinViewModuleOptions.value.activatedIsNeed) {
					getDataList();
				}
				getZoneListFn()
				getPutawaystrategyListFn()
				rolatebyFn()
				getSkucategoryList()
			})


			const zoneList = ref({});
			const getZoneListFn = () => {
				getzonelist().then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					zoneList.value = res.data;
				}).catch((err) => {});
			}

			const rolatebys = ref("");
			const rolatebyFn = () => {

				getCodeListByCode('rolateby').then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					rolatebys.value = res.data;
				}).catch((err) => {});
			}

			const getPutawaystrategyList = ref({});
			const getPutawaystrategyListFn = () => {
				getPutawaystrategyPage().then((res) => {
					if (res.code !== 0) {
						return ElMessage.error(res.msg);
					}
					getPutawaystrategyList.value = res.data.list;
				}).catch((err) => {});
			}


			const skucategoryListVisible = ref(false);
			// 上级菜单树, 选中
			const menuListTreeCurrentChangeHandle = (data) => {
				dataForm.value.sort = data.categorykey;
				dataForm.value.sortName = data.name;
				skucategoryListVisible.value = false;
			}

			const skucategoryList = ref([]);
			const skucategoryListTree = ref(null)
			const getSkucategoryList = () => {
				return getSkucategoryByType(0)
					.then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						// skucategoryList.value = res.data;

						let data1 = [];
						createList(res.data, data1);
						skucategoryList.value = data1;
					})
					.catch(function() {});
			}

			const createList = (sourcedata, targetdata) => {
				for (let i = 0; i < sourcedata.length; i++) {
					let tempdata = sourcedata[i];
					if (tempdata.children.length > 0) {
						let children = {
							categorykey: '',
							name: '',
							children: []
						}
						children.categorykey = tempdata.categorykey;
						children.name = tempdata.name;
						createList(tempdata.children, children.children);
						targetdata.push(children)
					} else {
						let children = {
							categorykey: '',
							name: ''
						}
						children.categorykey = tempdata.categorykey;
						children.name = tempdata.name;
						targetdata.push(children)
					}
				}

			}
		

			const sortvalue = ref([]);
			const handleChange = (sortvalue) =>{
				dataForm.value.sort = "";
				if(!sortvalue){
					return ;
				}
				for (let i = 0; i < sortvalue.length; i++) {
					dataForm.value.sort += sortvalue[i] + '#';
				}
				console.log(dataForm.value.sort );
			}
			const resetSort = () => {
				dataForm.value.sort = '';
				dataForm.value.sortName = '';
			}

			const refreshFn = ()=>{
				//addOrUpdateVisible.value = false;
				getDataList();
			}
			
			const exportModuleHandle = () => {
				request({
					url: '/lswms/sku/exportModule',
					method: 'get',
					responseType: 'blob'
				}).then((res) => {
					let fileName = 'Skumodule.xls' //excel文件名称
					let blob = new Blob([res.data], {
						type: 'application/x-xls'
					}) //word文档为msword,pdf文档为pdf，excel文档为x-xls
					if (window.navigator.msSaveOrOpenBlob) {
						navigator.msSaveBlob(blob, fileName);
					} else {
						var link = document.createElement('a');
						link.href = window.URL.createObjectURL(blob);
						link.download = fileName;
						link.click();
						window.URL.revokeObjectURL(link.href);
					}
			
				})
			
			
			}
			
			return {
				uploadActionUrl,
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				zoneList,
				getPutawaystrategyList,
				rolatebys,
				uploadOk,

				skucategoryListVisible,
				menuListTreeCurrentChangeHandle,
				skucategoryList,
				skucategoryListTree,
				resetSort,
				handleChange,
				sortvalue,
				refreshFn,
				exportModuleHandle

			}
		},
		methods:{
			hasPermission
		}
	}
</script>

<style scoped>

</style>
